<template>
  <div class="reset-password">
    <div class="left">
      <div class="imga"></div>
    </div>
    <div class="right">
      <form action="" @submit.prevent="handleReset">
        <div class="title">重置密码</div>
        <div class="newpassw">
          <div class="wenzi">密码</div>
          <input ref="refpassw_1" type="text" @input="changPattern_1" />
          <div class="eye">
            <span
              class="iconfont"
              :class="eye_1 ? 'icon-yanjing_xianshi_o' : 'icon-yanjing_yincang_o'"
              @click="changEye_1"
            ></span>
          </div>
        </div>
        <div class="renewpassw">
          <div class="wenzi">重复密码</div>
          <input ref="refpassw_2" type="text" @input="changPattern_2" />
          <div class="eye">
            <span
              class="iconfont"
              :class="eye_2 ? 'icon-yanjing_xianshi_o' : 'icon-yanjing_yincang_o'"
              @click="changEye_2"
            ></span>
          </div>
        </div>
        <div class="degree">
          密码强度 <span :style="{ color: colorArr[index] }">{{ powerDegree[index] }}</span>
        </div>
        <button class="submit">重置密码</button>
        <div class="register">没有账号？ <span @click="push('/login-manage/register')"> 用户注册</span></div>
        <div class="login">已有账号 <span @click="push('/login-manage')"> 用户登录</span></div>
      </form>
    </div>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus'
import { resetpassw } from '../../services/index'
import useEye from '../../hooks/useEye'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, toRefs, h } from 'vue'

export default {
  setup() {
    const Router = useRouter()
    const Route = useRoute()
    let index = ref(-1)
    const _data = reactive({
      colorArr: ['#FB0707', 'orange', '#00FF85'],
      powerDegree: ['简单', '中等', '很强']
    })

    let {
      changEye: changEye_1,
      eye: eye_1,
      password: password_1,
      changPattern: changPattern_1,
      refpassw: refpassw_1
    } = useEye(index)
    let {
      changEye: changEye_2,
      eye: eye_2,
      password: password_2,
      changPattern: changPattern_2,
      refpassw: refpassw_2
    } = useEye(index)

    async function handleReset() {
      if (!JSON.parse(Route.query.email).userId) {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '邮箱不存在')
        })
        return
      }
      if (password_1.value === password_2.value) {
        let res = await resetpassw({
          password: password_2.value,
          id: JSON.parse(Route.query.email).userId
        })
        if (res.password === password_2.value) {
          ElNotification({
            title: 'Title',
            message: h('i', { style: 'color: teal' }, '密码重置成功')
          })
          Router.push('/login-manage')
        }
      } else {
        console.log(password_1.value, password_2.value)
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '密码不一致')
        })
      }
    }

    return {
      ...toRefs(_data),
      push: Router.push,
      handleReset,
      changEye_1,
      eye_1,
      changPattern_1,
      refpassw_1,
      changEye_2,
      eye_2,
      changPattern_2,
      refpassw_2,
      index
    }
  }
}
</script>

<style lang="less">
@import '../auto_css/ResetPassword.less';
</style>
